<template><div><h1 id="web" tabindex="-1"><a class="header-anchor" href="#web" aria-hidden="true">#</a> WEB</h1>
<h2 id="_1-在浏览器输入url并回车后都发生了什么" tabindex="-1"><a class="header-anchor" href="#_1-在浏览器输入url并回车后都发生了什么" aria-hidden="true">#</a> 1.在浏览器输入URL并回车后都发生了什么</h2>
<p><strong><code v-pre>https://www.baidu.com</code></strong></p>
<p><code v-pre>URL</code> =&gt; 统一资源定位符，俗称网址</p>
<p><code v-pre>URL</code>是<code v-pre>IP</code>的一个映射</p>
<p><code v-pre>https:</code>  传输协议 （在http和TCP之间加了一层 TSL或者SSL是安全层）</p>
<p><code v-pre>www:</code> 服务器</p>
<p><code v-pre>baidu.com:</code>  域名</p>
<p><strong>第一次访问</strong></p>
<ol>
<li>解析<code v-pre>url</code>，<code v-pre>DNS</code>域名系统匹配真实<code v-pre>IP</code></li>
<li>建立链接（<code v-pre>TCP</code>三次握手）</li>
<li>浏览器   相应<code v-pre>http</code>请求，向浏览器发送数据，浏览器得到<code v-pre>html</code>代码</li>
<li>浏览器器解析<code v-pre>html</code>代码，并请求<code v-pre>html</code>代码中的资源</li>
<li>浏览器对页面进行渲染呈现给用户</li>
</ol>
<p><strong>第二次访问</strong></p>
<p>读取浏览器缓存</p>
<h2 id="_2-从那些地方做性能优化" tabindex="-1"><a class="header-anchor" href="#_2-从那些地方做性能优化" aria-hidden="true">#</a> 2.从那些地方做性能优化</h2>
<p><strong>加载</strong></p>
<ol>
<li>减少<code v-pre>http</code>请求（雪碧图，文件合并）</li>
<li>减少文件大小（资源压缩，图片压缩，代码压缩）</li>
<li><code v-pre>CDN</code>（第三方库，大文件，大图）</li>
<li><code v-pre>SSR</code>服务端渲染，预渲染</li>
<li>懒加载</li>
<li>分包（加快主页的加载）</li>
</ol>
<p><strong>性能</strong></p>
<p>减少<code v-pre>dom</code>操作，避免回流，文件碎片</p>
</div></template>


